import React, { Component } from 'react';
import { Card } from 'antd';
//import echarts from 'echarts';
import echartTheme from './../themeLight';
//按需导入
import echarts from 'echarts/lib/echarts';
//导入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';

class Pie extends Component {
	UNSAFE_componentWillMount(){
		echarts.registerTheme("Imooc", echartTheme);
	}
	
	getOption = () => {
		let option = {
			title: {
				text: "用户骑行订单",
				x: 'center'
			},
			legend: {
				data:['周一','周二','周三','周四','周五','周六','周日'],
				orient: 'vertical',
				right: 10,
				top: 20,
				bottom: 20
			},
			tooltip:{
				trigger: 'item',
				formatter: '{a}<br/>{b}：{c}({d}%)'
			},
			series: [
				{
					name: '订单量',
					type: 'pie',
					data: [
						{name: '周一',value:1000},
						{name: '周二',value:800},
						{name: '周三',value:1200},
						{name: '周四',value:1300},
						{name: '周五',value:1215},
						{name: '周六',value:890},
						{name: '周日',value:1500}
					]
				}
			]
		}
		return option;
	}
	getOption2 = () => {
		let option = {
			title: {
				text: "用户骑行订单",
				x: 'center'
			},
			legend: {
				data:['周一','周二','周三','周四','周五','周六','周日'],
				orient: 'vertical',
				right: 10,
				top: 20,
				bottom: 20
			},
			tooltip:{
				trigger: 'item',
				formatter: '{a}<br/>{b}：{c}({d}%)'
			},
			series: [
				{
					name: '订单量',
					type: 'pie',
					radius:['50%',"80%"],
					center:["50%","60%"],
					data: [
						{name: '周一',value:1000},
						{name: '周二',value:800},
						{name: '周三',value:1200},
						{name: '周四',value:1300},
						{name: '周五',value:1215},
						{name: '周六',value:890},
						{name: '周日',value:1500}
					]
				}
			]
		}
		return option;
	}
	
	getOption3 = () => {
		let option = {
			title: {
				text: "用户骑行订单",
				x: 'center'
			},
			legend: {
				data:['周一','周二','周三','周四','周五','周六','周日'],
				orient: 'vertical',
				right: 10,
				top: 20,
				bottom: 20
			},
			tooltip:{
				trigger: 'item',
				formatter: '{a}<br/>{b}：{c}({d}%)'
			},
			series: [
				{
					name: '订单量',
					type: 'pie',
					roseType: 'radius',
					data: [
						{name: '周一',value:1000},
						{name: '周二',value:800},
						{name: '周三',value:1200},
						{name: '周四',value:1300},
						{name: '周五',value:1215},
						{name: '周六',value:890},
						{name: '周日',value:1500}
					].sort((a,b)=>{
						return a.value-b.value
					}),
					
				}
			]
		}
		return option;
	}
	
	render(){
		return (
			<div style={{width: '100%'}}>
				<Card title="饼图A" style={{width: '100%', marginBottom: 10}}>
					<ReactEcharts option={this.getOption()} theme="Imooc" style={{height: 400}} />
				</Card>
				<Card title="饼图B">
					<ReactEcharts option={this.getOption2()} theme="Imooc" style={{height: 400}} />
				</Card>
				<Card title="饼图C">
					<ReactEcharts option={this.getOption3()} theme="Imooc" style={{height: 400}} />
				</Card>
			</div>
		)
	}
}

export default Pie;